<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qq</title>
</head>

<body>
    <!-- css -->
    <h1>CSS课程</h1>
    <input type="button" value="INPUT按钮" />
    <br />
    <button class="btn-class-1">button按钮</button>
    <button class="btn-class-1">button按钮2</button>
    <!--  -->
    <p>这是一个段落<strong>哈哈哈</strong>结束</p>
    <h2>这是一个标题<strong>呵呵呵</strong>结束</h2>
    <br />
    <!--  -->
    <table class="cla-001">
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>www</td>
            <td>qqq</td>
            <td>qqq</td>
        </tr>
    </table>
    <div id="id001">
        CSS3 动画
    </div>
    <div class="cla-001">
        11111
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
<style>
    /* css选择器 */
    body {
        background-image: url("http://10wallpaper.com/wallpaper/2560x1600/1306/space_stars_black_holes_circles-Space_Photography_HD_Wallpaper_2560x1600.jpg");
    }

    /* id选择器 */
    #btn2 {
        padding: 100px;
    }

    /* class(类)选择器 */
    .btn-class-1 {
        padding: 100px;
    }

    h1 {
        color: rgb(25, 221, 35);
        color: #000;
        color: red;
        text-align: center;
        font-style: times;
    }

    /* 派生选择器(层级) */
    p strong {
        color: aquamarine;
    }

    h2 strong {
        color: red;
    }

    /*  */
    table.cla-001 {
        border: 3px solid;
        border-radius: 15px;
        background-color: aquamarine;
        margin: 100px 100px 100px 100px;
    }

    /*  */
    #id001 {
        width: 100px;
        height: 100px;
        background: rgb(254, 67, 101);
        position: relative;
        animation: id001 5s;
        -webkit-animation: id001 5s;
        border-radius: 25px;
        font-weight: bold;
        font-size: 40px;
        padding: 10px;
    }

    @keyframes id001 {
        0% {
            background: rgb(254, 67, 101);
            left: 0px;
            top: 0px;
        }

        25% {
            background: rgb(252, 157, 154);
            left: 1000px;
            top: 0px;
        }

        50% {
            background: rgb(249, 205, 173);
            left: 0px;
            top: 0px;
        }

        75% {
            background: rgb(200, 200, 169);
            left: 1000px;
            top: 0px;
        }

        100% {
            background: rgb(254, 67, 101);
            left: 0px;
            top: 0px;
        }
    }

    .cla-001 {
        height: 400px;
        background-image: linear-gradient(#e66465, #9198e5);
    }

    /* 深红色：R=254 G=67 B=101
浅红色：R=252 G=157 B=154
浅黄色：R=249 G=205 B=173
浅青色：R=200 G=200 B=169
淡青色：R=131 G=175 B=155 */
</style>

</html>